import React, { useContext , CSSProperties,FC } from "react";
import classNames from 'classnames';
import { TabConext } from './tabs';

interface tabItemProps {
    index?:string | number,
    className?:string,
    style?:CSSProperties,
    disabled?:boolean,
    title: string,
};

const TabItem:FC<tabItemProps> = (props)=>{
    let { index, className , disabled , style , children , title} = props;
    

    const context = useContext(TabConext);


    const classes = classNames('tabItem' , className , {
        'is-active': Number(context.index) === Number(index),
        'is-disabled': disabled
    });

    const handleClick = ()=>{
        
        if ( (context.onSelect && !disabled) ){
            context.onSelect(index as number);
        }

    }
    
    return<div onClick={handleClick} className={classes} style={style}>
        <div className="title">{title}</div>
        {children} 
    </div>
}

TabItem.displayName = 'TabItem';

export type {
    tabItemProps,
}

export default TabItem;

